<template>
    <div id="projectDetails" class="">
        <div class="top-banner">
            <div class="ww content">
                <div class="c-left">
                    <p>辣么棒麻辣烫</p>
                    <p>杭州辣么棒餐饮管理有限公司</p>
                    <p>10-20万</p>
                </div>
                <div class="c-right">
                    <p>咨询热线：400-999-8017 </p>
                    <p>更新时间：<i>2019-1-1</i></p>
                </div>
            </div>
        </div>

        <div class="c-mid">
            <el-tabs>
                <el-tab-pane>
                    <span slot="label"><i class="iconfont">&#xe998;</i><i>项目首页</i></span>

                    <ul class="tab-item-nav ww">
                        <!--首页内容-->
                        <li class="home-item">
                            <div class="">
                                <img src="./images/main_img01.png" alt="">
                                <img src="./images/main_img02.png" alt="">
                                <img src="./images/main_img03.png" alt="">
                                <img src="./images/main_img04.png" alt="">
                            </div>
                        </li>
                    </ul>


                </el-tab-pane>
                <el-tab-pane>
                    <span slot="label"><i class="iconfont">&#xe608;</i>项目详情</span>
                    <!--项目详情-->
                    <!--面包屑-->
                    <div class="ww second-box">
                        <div class="bread">
                            <router-link to="/" tag="a"><i class="iconfont">&#xe6a2;</i>首页</router-link>
                            <span class="iconfont">&#xe603;</span>
                            <router-link to="/project" tag="a">项目库</router-link>
                            <span class="iconfont">&#xe603;</span>
                            <a href="javascript:void(0);">项目详情</a>
                        </div>
                    </div>


                    <!--两列布局-->
                    <div class="info-box clearfix ww">
                        <!--左边-->
                        <div class="ib-left fl">
                            <!--项目信息-->
                            <div class="project-show">
                                <img src="./images/pro_detail_img.png" alt="">
                                <div class="ps-r">
                                    <h2>辣么棒麻辣烫</h2>
                                    <div>
                                        <span>品牌发源地：<i>杭州</i></span>
                                        <span class="fr">门店总数：<i>200家</i></span>
                                    </div>
                                    <div style="margin-top: 10px;margin-bottom: 10px;">
                                        <span>所属行业：<i>小吃</i></span>
                                        <span class="fr" style="padding-right: 13px;">加盟区域：<i>全国</i></span>
                                    </div>
                                    <div>适合人群：<i>自由创业、在岗投资、毕业生创业</i></div>
                                    <a href="javascript:void(0);">获取加盟资料</a>
                                </div>
                            </div>

                            <!--文章-->
                            <article>
                                <h2>辣么棒麻辣烫项目<i>详情</i></h2>
                                <p>
                                    辣么棒专注于外卖市场，30平小铺创造超60万的月销售记录。辣么棒秉持“一类商圈，十类店铺”的全新理念，以独创的动线设计、标准化工艺、21秒极速出餐突破打破传统的餐饮模式局限。辣么棒率先采用托管式的加盟服务，拥有专业的营运团队，提供集团化的系统支持，建立12000平方中央厨房标准化生产，提供全国各地分仓全程配送支持，全力保障店面运营。而且我们跑遍全国，以重庆石柱县最好的辣椒和四川汉源茂县顶级花椒为基础配料，用新鲜的牛骨历时颇久熬制出香浓醇厚的汤底，荤素搭配，营养美味。</p>

                                <p>杭州辣么棒餐饮管理有限公司，还涵盖餐饮品牌、原料源头生产、直营及加盟门店体系建设和管理、原物料终端消费等业务。想了解辣么棒麻辣烫加盟费用多少，可在线咨询客服。</p>
                                <img src="./images/art_img01.png" alt="">
                                <h2>辣么棒麻辣烫项目<i>优势</i></h2>
                                <p>
                                    辣么棒专注于外卖市场，30平小铺创造超60万的月销售记录。辣么棒秉持“一类商圈，十类店铺”的全新理念，以独创的动线设计、标准化工艺、21秒极速出餐突破打破传统的餐饮模式局限。辣么棒率先采用托管式的加盟服务，拥有专业的营运团队，提供集团化的系统支持，建立12000平方中央厨房标准化生产，提供全国各地分仓全程配送支持，全力保障店面运营。而且我们跑遍全国，以重庆石柱县最好的辣椒和四川汉源茂县顶级花椒为基础配料，用新鲜的牛骨历时颇久熬制出香浓醇厚的汤底，荤素搭配，营养美味。</p>

                                <p>杭州辣么棒餐饮管理有限公司，还涵盖餐饮品牌、原料源头生产、直营及加盟门店体系建设和管理、原物料终端消费等业务。想了解辣么棒麻辣烫加盟费用多少，可在线咨询客服。</p>
                                <img src="./images/art_img01.png" alt="">
                            </article>
                        </div>

                        <!--右边-->
                        <div class="ib-right fr">
                            <h2>企业信息</h2>
                            <img src="./images/door.png" alt="">
                            <p>杭州辣么棒餐饮管理有限公司</p>
                            <div class="clearfix cI-box">
                                <span><i></i>企业认证</span>
                                <span><i></i>工商备案</span>
                            </div>
                            <el-form :model="telForm" :rules="telRules" ref="telForm" class="telForm">
                                <el-form-item label="" prop="tel">
                                    <el-input v-model="telForm.tel"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="danger" @click="submitTel('telForm')">提交留言</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>

                </el-tab-pane>
            </el-tabs>
        </div>
        <pf></pf>
    </div>
</template>

<script>

    import pf from "@/components/projectForm/projectForm"

    export default {
        name: "ProjectDetails",
        data() {
            // 验证手机号的方法
            const checkPhone = (rule, value, callback) => {
                console.log(value)
                if (!value) {
                    return callback(new Error('请输入手机号码'));
                } else {
                    const reg = /^[1][3,4,5,6,7,8][0-9]{9}$/;
                    console.log(reg.test(value));
                    if (reg.test(value)) {
                        callback();
                    } else {
                        return callback(new Error('请输入正确的手机号码'));
                    }
                }
            };
            return {
                // 用户通话表单
                telForm: {
                    tel: ""
                },
                telRules: {
                    tel: {validator: checkPhone, trigger: 'blur'}
                }

            }
        },
        methods: {
            // 用户表单提交
            submitTel(formName) {
                console.log(this.userform)
                this.$refs[formName].validate((valid) => {
                    // console.log(valid)
                    if (valid) {
                        // alert('submit!');
                        // 提交成功后清空表单
                        for (let key in this.telForm) {
                            this.userform[key] = ""
                        }
                        console.log(this.userform)
                    } else {
                        alert('error submit!!');
                        return false;
                    }
                })
            },
        },
        components:{
            pf
        }
    }
</script>

<style lang="less">
    #projectDetails {
        padding-bottom: 300px;
        .top-banner {
            margin-top: 1px;
            height: 90px;
            background-color: #fff;
            border: 1px solid #eeeeee;

            .content {
                padding-left: 22px;
                padding-right: 22px;
                display: flex;
                justify-content: space-between;

                .c-left {
                    flex: 0 0 261px;
                    margin-top: 20px;

                    p {
                        &:nth-of-type(1) {
                            color: #333;
                            font-size: 18px;
                        }

                        &:nth-of-type(2) {
                            color: #999;
                            font-size: 12px;
                        }

                        &:nth-of-type(3) {
                            color: #e8332f;
                            font-size: 14px;
                        }
                    }
                }

                .c-right {
                    flex: 0 0 261px;
                    margin-top: 30px;

                    p {
                        text-align: right;

                        &:nth-of-type(1) {
                            font-size: 18px;
                            color: #e8332f;
                        }

                        &:nth-of-type(2) {
                            font-size: 12px;
                            color: #999;
                        }
                    }
                }
            }
        }


        .c-mid {
            position: relative;
            top: -86px;
            left: 50%;
            transform: translateX(-50%);

            .el-tabs__header {
                width: 261px;
                margin: 0 auto;
            }

            /* 隐藏下边框 */

            .el-tabs__nav-wrap::after {
                position: static;
            }

            /* 隐藏选中的下划线 */

            .el-tabs__active-bar {
                background-color: transparent;
            }

            /* 设置整体高度 */

            .el-tabs__nav {
                height: 86px;
            }

            .el-tabs__item {
                width: 56px;
                padding: 0;
                color: #666;
                font-size: 14px;
                padding-top: 10px;

                span {
                    display: inline-block;
                    height: 100%;
                }

                i {
                    display: block;

                    &:nth-of-type(1) {
                        text-align: center;
                        font-size: 30px;
                    }

                    &:nth-of-type(2) {

                    }
                }

                &.is-active {
                    color: #e83b38;
                }
            }

            .el-tabs__nav {
                width: 100%;
            }

            /* 设置左右浮动 */

            #tab-0 {
                margin-right: 151px;
            }

            /*#tab-1 {*/
            /*right: -146px;*/
            /*}*/


        }

        /* 切换的内容 */

        .tab-item-nav {
            /* 首页内容 */

            .home-item {

                img {
                    display: block;
                    width: 100%;
                    margin-top: -1px;
                }

            }
        }

        /* 第二块 */

        .second-box {
            .bread {
                margin-top: 19px;
                margin-bottom: 19px;

                a {
                    font-size: 12px;
                    color: #4f646a;

                    &:nth-of-type(1) {
                        i {
                            font-size: 12px;
                            color: #4f646a;
                            margin-right: 4px;
                        }
                    }

                    &:hover {
                        color: #f32222;

                        i {
                            color: #f32222;
                        }
                    }
                }

                span {
                    color: #4f646a;
                    font-size: 12px;
                    margin-left: 3px;
                    margin-right: 3px;
                }
            }
        }

        .info-box {
            //height: 500px;
            .ib-left {
                width: 921px;
                //background-color: #8effa9;

                .project-show {
                    width: 921px;
                    padding: 56px 117px 35px 57px;
                    background-color: #ffffff;
                    box-shadow: 0 3px 10px 0 rgba(92, 92, 92, 0.3);
                    display: flex;
                    justify-content: space-between;

                    img {
                        display: block;
                        flex: 0 0 344px;
                        height: 200px;
                        border-radius: 10px;
                    }

                    .ps-r {
                        width: 355px;

                        h2 {
                            font-size: 25px;
                            color: #333;
                        }

                        div {
                            font-size: 16px;
                            color: #666;

                            span {
                                font-size: 16px;
                                color: #666;
                            }

                            i {
                                font-size: 16px;
                                color: #ff7800;
                            }
                        }

                        a {
                            display: block;
                            width: 180px;
                            height: 40px;
                            background-image: linear-gradient(180deg,
                            #ff433a 0%,
                            #ff120b 100%),
                            linear-gradient(
                                    #ff0600,
                                    #ff0600);
                            background-blend-mode: normal,
                            normal;
                            box-shadow: 3px 2px 3px 0 rgba(255, 5, 0, 0.3);
                            border-radius: 20px;
                            line-height: 40px;
                            text-align: center;
                            color: #fff;
                            font-size: 20px;
                            margin-top: 25px;

                            &:hover {
                                box-shadow: 3px 2px 6px 0 rgba(255, 5, 0, 0.3);
                            }
                        }
                    }
                }

                /* 文章 */

                article {
                    background-color: #fff;
                    margin-top: 22px;
                    margin-bottom: 51px;
                    border-top: 1px solid transparent;
                    padding: 0 57px 57px 44px;

                    h2 {
                        font-size: 18px;
                        height: 71px;
                        line-height: 71px;
                        color: #333;
                        border-bottom: 1px solid #eaeaea;
                        padding-left: 23px;
                        margin-bottom: 28px;

                        i {
                            color: #e8332f;
                        }
                    }

                    p {
                        text-indent: 2em;
                        margin-bottom: 33px;
                        font-size: 16px;
                        color: #333;
                        line-height: 30px;
                    }

                    img {
                        display: block;
                        margin: 0 auto 34px auto;
                    }
                }
            }

            .ib-right {
                width: 258px;
                border: solid 1px #e8332f;
                padding-bottom: 20px;
                background-color: #fff;

                h2 {
                    width: 100%;
                    height: 42px;
                    background-color: #e8332f;
                    color: #fff;
                    line-height: 42px;
                    font-size: 16px;
                    text-align: center;
                }

                img {
                    display: block;
                    width: 215px;
                    height: 106px;
                    margin: 23px auto;
                    border-radius: 5px;
                }

                p {
                    color: #e8332f;
                    font-size: 14px;
                    text-align: center;
                    margin-bottom: 25px;
                }

                .cI-box {
                    margin-left: 24px;
                    margin-bottom: 14px;

                    span {
                        color: #333;
                        height: 30px;
                        font-size: 14px;
                        vert-align: middle;

                        i {
                            display: inline-block;
                            width: 30px;
                            height: 30px;
                            vertical-align: middle;
                        }

                        &:nth-of-type(1) {
                            i {
                                background: url("./images/company.png") no-repeat center center;
                                background-size: contain;
                                margin-right: 11px;
                            }
                        }

                        &:nth-of-type(2) {
                            i {
                                background: url("./images/ICBC.png") no-repeat center center;
                                background-size: contain;
                                margin-left: 16px;
                                margin-right: 11px;
                            }
                        }
                    }
                }

                form {
                    text-align: center;

                    input[type="text"] {
                        padding-left: 35px;
                        border: 0;
                        border: solid 1px #cbcbcb;
                        width: 154px;
                        height: 32px;
                        background-color: #ffffff;
                        border-radius: 5px;
                        margin-bottom: 5px;
                    }

                    &::-webkit-input-placeholder {
                        color: rgb(200, 200, 200);
                        font-size: 14px;
                    }


                    /* Mozilla Firefox 4 to 18 */

                    input:-moz-placeholder {
                        color: #C0C0C0;
                        opacity: 1;
                        font-size: 14px;
                    }

                    /* Mozilla Firefox 19+ */

                    input::-moz-placeholder {
                        color: #C0C0C0;
                        opacity: 1;
                        font-size: 14px;
                    }

                    /* Internet Explorer 10+ */

                    input:-ms-input-placeholder {
                        color: #C0C0C0;
                        font-size: 14px;
                    }

                    input:focus {
                        outline: none;
                    }

                    input[type="submit"] {
                        border: none;
                        margin-top: 5px;
                        width: 154px;
                        height: 32px;
                        background-color: #ff7e0c;
                        box-shadow: 2px 4px 4px 0px rgba(170, 84, 0, 0.19);
                        border-radius: 5px;
                        color: #fff;
                        font-size: 14px;
                        cursor: pointer;

                        &:hover {
                            box-shadow: 2px 4px 8px 0px rgba(170, 84, 0, 0.19);
                        }
                    }

                }
            }
        }
        .telForm{
            .el-input__inner{
                padding-left: 15px!important;
            }
            .el-form-item__error{
                left: 65px;
            }
            .el-button.el-button--danger{
                padding: 0;
                width: 154px;
                height: 32px;
                background-color: #ff7e0c;
                box-shadow: 2px 4px 8px 0 rgba(170, 84, 0, 0.19);
                border-radius: 5px;
            }
        }
    }
</style>
